import { Form, Input, Button, Space, Table, Pagination } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Key, useEffect, useState } from 'react';
import { SysScheduleModelState, useDispatch, useSelector } from 'umi';
import './index.less';
export default function SysSchedule() {
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  const [select, setSelect] = useState<string[]>([]);

  // 搜索
  const onFinish = (values: any) => {};
  useEffect(() => {
    dispatch({
      type: 'Schedule/getSchedule',
    });
  }, []);
  const { ScheduleList, ScheduleLength } = useSelector(
    (state: { Schedule: SysScheduleModelState }) => state.Schedule,
  );
  const columns: any[] = [
    {
      key: 'ID',
      title: 'ID',
      dataIndex: 'ID',
      width: 80,
      align: 'center',
    },
    {
      key: 'beanName',
      title: 'bean名称',
      dataIndex: 'beanName',
      width: 150,
      align: 'center',
    },
    {
      key: 'methodName',
      title: '方法名称',
      dataIndex: 'methodName',
      width: 150,
      align: 'center',
    },
    {
      key: 'params',
      title: '参数',
      dataIndex: 'params',
      width: 150,
      align: 'center',
    },
    {
      key: 'cronExpression',
      title: 'cron表达式',
      dataIndex: 'cronExpression',
      width: 150,
      align: 'center',
    },
    {
      key: 'remark',
      title: '备注',
      dataIndex: 'remark',
      width: 150,
      align: 'center',
    },
    {
      key: 'status',
      title: '状态',
      dataIndex: 'status',
      width: 150,
      align: 'center',
    },
    {
      key: 'action',
      title: '操作',
      width: 200,
      dataIndex: 'action',
      align: 'center',
      render: (text: any, record: any, index: any) => (
        <Space size="middle">
          <Button type="primary" icon={<EditOutlined />}>
            修改
          </Button>
          <Button type="primary" danger icon={<DeleteOutlined />}>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const onChangeLenth = (ids: Key[]) => {
    console.log('111', ids);

    setSelect(ids as string[]);
  };
  return (
    <div className="sys-Schedule">
      <Form layout="inline" form={form} onFinish={onFinish}>
        <Form.Item name={`transName`}>
          <Input placeholder="bean名称" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" ghost>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            新增
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" danger disabled>
            批量删除
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" danger disabled>
            批量暂停
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" danger disabled>
            批量恢复
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" danger disabled>
            批量立即执行
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            日志列表
          </Button>
        </Form.Item>
      </Form>
      <div className="schedule">
        <Table
          bordered={true}
          columns={columns}
          dataSource={ScheduleList}
          rowSelection={{ type: 'checkbox', onChange: onChangeLenth }}
        />
      </div>
      <div className="pagination">
        <Pagination defaultCurrent={1} total={500} />
      </div>
    </div>
  );
}
